import React, { Component } from 'react';

class TodoItem extends Component {
    constructor(props) {
        super(props);
        this.handleClick = this.handleClick.bind(this);
    }
    handleClick() {
        // 子组件调用父组件的方法：
        // 写法一：
        // this.props.deleteItem(this.props.index);
        // 写法二：
        const { deleteItem, index } = this.props;
        deleteItem(index);
    }

    /**
     * 防止由于父组建的render函数执行时触发子组件的render也再无谓地
     * 刷新执行引起的性能浪费
     * @returns {boolean}
     */
    shouldComponentUpdate(nextProps, nextState) {
        if (nextProps.content !== this.props.content) {
            return true;
        }else {
            return false;
        }
    }

    render() {
        console.log("this is the child")
        // 注意：这样写比较标准
        const content = this.props.content;
        return(
            <div onClick = {this.handleClick}>
                {content}
            </div>
        );
    }
}
export default TodoItem;